import React from "react";
import ReactDOM from 'react-dom'
import '../../main.scss'
import {designPage} from "plain-design-composition";
import {createCmsCarousel} from "../../components/CmsCarousel";
import {reactivityApi} from "../../packages/utils/vueReactivityApi";

const Test = designPage(() => {

    const {Carousel, CarouselItem} = createCmsCarousel(reactivityApi)

    return () => (
        <div>
            <Carousel childNum={3}>
                <CarouselItem style={{height: '300px', backgroundColor: 'black'}}>
                    Slide 1
                </CarouselItem>
                <CarouselItem style={{height: '400px', backgroundColor: 'saddlebrown'}}>
                    Slide 2
                </CarouselItem>
                <CarouselItem style={{height: '500px', backgroundColor: 'dimgray'}}>
                    Slide 3
                </CarouselItem>
            </Carousel>

            <button>BUTTON</button>
        </div>
    )
})

ReactDOM.render(<Test/>, document.querySelector('#app'))
